<template>
    <div>
        <div class="fcRightBox">
            <div class="fcHeader">
                <div class="fcHeader-title-container">
                    <div class="left-part">
                        <div class="title">数据简报</div>
                        <div class="refresh-data-time"></div>
                    </div>
                    <div class="right-part">

                        <div class="fcHeader-date-pick-container"
                             style="display: flex;align-items: center;justify-content: space-between">

                            <el-select v-model="form.conIndicators" placeholder="请选择" class="fcSelect"
                                       @change="queryList()">
                                <span slot="prefix" class="select-prefix">转换指标：</span>
                                <el-option v-for="item in conIndicatorsSelectList"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>

                            </el-select>

                            <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                                    style="width: 50%; min-width:180px"
                                    size="small"
                                    v-model="timerArray"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions"
                                    :clearable="false"
                                    range-separator="~"
                                    type="daterange"
                                    @change="queryList"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </div>

                    </div>
                </div>

            </div>
            <div style="width: 100%;overflow: hidden;display: flex;justify-content: space-between;align-items: center; flex-wrap: wrap; /* 这里使得子元素可以在必要的时候换行 */">
                <div class="insight-report-data-card-sum-card">
                    <div class="insight-report-data-card-sum-card-title"><span>消费（元）</span></div>
                    <span class="insight-report-data-card-sum-card-value">-</span>
                    <div class="insight-report-data-card-sum-card-rate">
                        <div class="insight-report-data-card-sum-card-rate-content"><span>周同比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                        <div class="insight-report-data-card-sum-card-rate-content"><span>日环比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                    </div>
                </div>
                <div class="insight-report-data-card-sum-card">
                    <div class="insight-report-data-card-sum-card-title"><span>展现（次）</span></div>
                    <span class="insight-report-data-card-sum-card-value">-</span>
                    <div class="insight-report-data-card-sum-card-rate">
                        <div class="insight-report-data-card-sum-card-rate-content"><span>周同比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                        <div class="insight-report-data-card-sum-card-rate-content"><span>日环比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                    </div>
                </div>
                <div class="insight-report-data-card-sum-card">
                    <div class="insight-report-data-card-sum-card-title"><span>点击（次）</span></div>
                    <span class="insight-report-data-card-sum-card-value">-</span>
                    <div class="insight-report-data-card-sum-card-rate">
                        <div class="insight-report-data-card-sum-card-rate-content"><span>周同比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                        <div class="insight-report-data-card-sum-card-rate-content"><span>日环比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                    </div>
                </div>
                <div class="insight-report-data-card-sum-card">
                    <div class="insight-report-data-card-sum-card-title"><span>点击率</span></div>
                    <span class="insight-report-data-card-sum-card-value">-</span>
                    <div class="insight-report-data-card-sum-card-rate">
                        <div class="insight-report-data-card-sum-card-rate-content"><span>周同比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                        <div class="insight-report-data-card-sum-card-rate-content"><span>日环比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                    </div>
                </div>
                <div class="insight-report-data-card-sum-card">
                    <div class="insight-report-data-card-sum-card-title"><span>平均点击价格（元</span></div>
                    <span class="insight-report-data-card-sum-card-value">-</span>
                    <div class="insight-report-data-card-sum-card-rate">
                        <div class="insight-report-data-card-sum-card-rate-content"><span>周同比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                        <div class="insight-report-data-card-sum-card-rate-content"><span>日环比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                    </div>
                </div>
                <div class="insight-report-data-card-sum-card">
                    <div class="insight-report-data-card-sum-card-title"><span>转化量（次）</span></div>
                    <span class="insight-report-data-card-sum-card-value">-</span>
                    <div class="insight-report-data-card-sum-card-rate">
                        <div class="insight-report-data-card-sum-card-rate-content"><span>周同比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                        <div class="insight-report-data-card-sum-card-rate-content"><span>日环比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                    </div>
                </div>
                <div class="insight-report-data-card-sum-card">
                    <div class="insight-report-data-card-sum-card-title"><span>转化成本</span></div>
                    <span class="insight-report-data-card-sum-card-value">-</span>
                    <div class="insight-report-data-card-sum-card-rate">
                        <div class="insight-report-data-card-sum-card-rate-content"><span>周同比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                        <div class="insight-report-data-card-sum-card-rate-content"><span>日环比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                    </div>
                </div>
                <div class="insight-report-data-card-sum-card">
                    <div class="insight-report-data-card-sum-card-title"><span>转化率</span></div>
                    <span class="insight-report-data-card-sum-card-value">-</span>
                    <div class="insight-report-data-card-sum-card-rate">
                        <div class="insight-report-data-card-sum-card-rate-content"><span>周同比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                        <div class="insight-report-data-card-sum-card-rate-content"><span>日环比</span><span
                                class="compare-ratio compare-ratio-common">-</span></div>
                    </div>
                </div>

            </div>
            <div class="fcHeader-container fcHeader-container-custom-dash">
                <img style="width: 100%" src="../分析路径.png">
            </div>
            <div  style="margin-top: 20px;display: flex;align-items: center;justify-content: space-between">

                <div class="fcHeader-container fcHeader-container-custom-dash"  style="width:49%;margin-right:15px;min-width: 504px">
                    <div class="contentHeader">
                 <p style="font-size: 20px;font-weight: 500;">top搜索词</p>
                      <div class="contentHeader_right contentHeader_right_xiaofei" style=" justify-content: flex-end;">
                    <el-select style="width: 120px;margin-left: 10px" @change="queryList" v-model="form.sumType"
                               placeholder="请选择" class="select-with-prefix">
                      <el-option
                          v-for="item in sumTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>

                  </div>
                    </div>
                    <el-table
                            :data="tableList"
                            style="width: 100%;background: #EBEDF5"
                            :default-sort="{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="createTime"
                                label="排名"
                                sortable
                                min-width="180">
                        </el-table-column>
                        <el-table-column
                                prop="userName"
                                label="搜索词"
                                sortable
                                min-width="180">
                        </el-table-column>
                        <el-table-column
                                prop="promotionPlan"
                                label="消费">

                        </el-table-column>
                        <el-table-column
                                prop="promotionUnit"
                                label="日环比">

                        </el-table-column>
                        <el-table-column
                                prop="keyword"
                                label="周同比">
                        </el-table-column>


                    </el-table>

                </div>
                <div class="fcHeader-container fcHeader-container-custom-dash"  style="width:50%;min-width: 504px">
                    <div class="contentHeader">
                        <p style="font-size: 20px;font-weight: 500;">top关键词</p>
                      <div class="contentHeader_right contentHeader_right_xiaofei" style=" justify-content: flex-end;">
                    <el-select style="width: 120px;margin-left: 10px" @change="queryList" v-model="form.sumType"
                               placeholder="请选择" class="select-with-prefix">
                      <el-option
                          v-for="item in sumTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>

                  </div>
                    </div>
                    <el-table
                            :data="tableList"
                            style="width: 100%;background: #EBEDF5"
                            :default-sort="{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="createTime"
                                label="排名"
                                sortable
                                min-width="180">
                        </el-table-column>
                        <el-table-column
                                prop="userName"
                                label="搜索词"
                                sortable
                                min-width="180">
                        </el-table-column>
                        <el-table-column
                                prop="promotionPlan"
                                label="消费">

                        </el-table-column>
                        <el-table-column
                                prop="promotionUnit"
                                label="日环比">

                        </el-table-column>
                        <el-table-column
                                prop="keyword"
                                label="周同比">
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="fcHeader-container fcHeader-container-custom-dash"  style="margin-top: 20px">
                <div class="contentHeader">
                    <p style="font-size: 20px;font-weight: 500;">触发模式分类占比</p>
                  <div class="contentHeader_right contentHeader_right_xiaofei" style=" justify-content: flex-end;">
                    <el-select style="width: 120px;margin-left: 10px" @change="queryList" v-model="form.sumType"
                               placeholder="请选择" class="select-with-prefix">
                      <el-option
                          v-for="item in sumTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>

                  </div>
                </div>
                <el-main>
                    <div style="display: flex;align-items: center">
                        <!-- 左侧ECharts图表区域 -->
                        <div class="chart-area" ref="chartContainer">
                            <!-- 这个div将被ECharts用作图表的容器 -->
                            <div ref="chart" style="width: 100%; height: 100%;"></div>
                        </div>


                        <!-- 右侧内容区域 -->
                        <div class="right-content" style="flex: 1">
                            <!-- 某些内容 -->
                            <el-table
                                    :data="tableList"
                                    style="width: 100%;background: #EBEDF5"
                                    :default-sort="{prop: 'date', order: 'descending'}"
                            >
                                <el-table-column
                                        prop="createTime"
                                        label="触发模式"
                                        sortable
                                        min-width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="userName"
                                        label="占比"
                                        sortable
                                        min-width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="promotionPlan"
                                        label="消费">

                                </el-table-column>
                                <el-table-column
                                        prop="promotionUnit"
                                        label="日环比">

                                </el-table-column>

                            </el-table>
                            <!-- 其他内容 -->
                        </div>
                    </div>
                </el-main>
            </div>
        </div>

    </div>
</template>

<script>
    import ItemMixins from "./item.mixins";
    import {appletReportList} from '@/services/model/datacenter'
    import * as echarts from 'echarts';
    export default {
        mixins: [ItemMixins],
        data() {
            return {  chartInstance: null,
             keySumList:[],
               searchSumList:[],
                form: {appletType: '小程序关键词'},
                isToggleStatus: false,

                chart: null,
                value: '消费',
                conIndicatorsSelectList: [{
                    value: '咨询按钮点击量',
                    label: '咨询按钮点击量'
                }, {
                    value: '三句话咨询量',
                    label: '三句话咨询量'
                }, {
                    value: '一句话咨询量',
                    label: '一句话咨询量'
                }, {
                    value: '小程序线索量',
                    label: '小程序线索量'
                },

                    {
                        value: '有意向客户量',
                        label: '有意向客户量'
                    }, {
                        value: '聊到相关业务',
                        label: '聊到相关业务'
                    }, {
                        value: '回访-电话接通量',
                        label: '回访-电话接通量'
                    }, {
                        value: '回访-信息确认量',
                        label: '回访-信息确认量'
                    },

                    {
                        value: '回访-发现意向量',
                        label: '回访-发现意向量'
                    }, {
                        value: '回访-高潜成交量',
                        label: '回访-高潜成交量'
                    }, {
                        value: '回访-成单客户量',
                        label: '回访-成单客户量'
                    }, {
                        value: '表单按钮点击量',
                        label: '表单按钮点击量'
                    },
                    {
                        value: '表单调起按钮点击量',
                        label: '表单调起按钮点击量'
                    }, {
                        value: '表单提交成交量',
                        label: '表单提交成交量'
                    }, {
                        value: '电话按钮点击量',
                        label: '电话按钮点击量'
                    }, {
                        value: '电话拨通量',
                        label: '电话拨通量'
                    },

                    {
                        value: '下载（预约）按钮点击量',
                        label: '下载（预约）按钮点击量'
                    }, {
                        value: '预约量',
                        label: '预约量'
                    }, {
                        value: '申请量',
                        label: '申请量'
                    }, {
                        value: '授信量',
                        label: '授信量'
                    },

                    {
                        value: '放款量',
                        label: '放款量'
                    }, {
                        value: '短信咨询按钮单击量',
                        label: '短信咨询按钮单击量'
                    }, {
                        value: '地图按钮点击量',
                        label: '地图按钮点击量'
                    }, {
                        value: '抽奖按钮点击量',
                        label: '抽奖按钮点击量'
                    },

                    {
                        value: '预约按钮点击量',
                        label: '预约按钮点击量'
                    }, {
                        value: '投票按钮点击量',
                        label: '投票按钮点击量'
                    }, {
                        value: '评价按钮点击量',
                        label: '评价按钮点击量'
                    }, {
                        value: '关注按钮点击量',
                        label: '关注按钮点击量'
                    },

                    {
                        value: '店铺起调量',
                        label: '店铺起调量'
                    }, {
                        value: '粉丝关注成功量',
                        label: '粉丝关注成功量'
                    }, {
                        value: '微信起调按钮点击量',
                        label: '微信起调按钮点击量'
                    }, {
                        value: '微信加粉成功量',
                        label: '微信加粉成功量'
                    },
                    {
                        value: '二次跳转量',
                        label: '二次跳转量'
                    }, {
                        value: '电商订单量',
                        label: '电商订单量'
                    }, {
                        value: '订单提交成功量',
                        label: '订单提交成功量'
                    }, {
                        value: '客户自定义转化量',
                        label: '客户自定义转化量'
                    },

                    {
                        value: '微信复制按钮点击量',
                        label: '微信复制按钮点击量'
                    }, {
                        value: '店铺停留转换量',
                        label: '店铺停留转换量'
                    }, {
                        value: '综合线索收集',
                        label: '综合线索收集'
                    }, {
                        value: '商品支付成功量',
                        label: '商品支付成功量'
                    },


                    {
                        value: '有效咨询',
                        label: '有效咨询'
                    }, {
                        value: '其他转化量(落地页)',
                        label: '其他转化量(落地页)'
                    }, {
                        value: '微信小程序调起人数',
                        label: '微信小程序调起人数'
                    }, {
                        value: '激活人数',
                        label: '激活人数'
                    },

                    {
                        value: '注册人数',
                        label: '注册人数'
                    }, {
                        value: '付费人数',
                        label: '付费人数'
                    }, {
                        value: '付费次数',
                        label: '付费次数'
                    }, {
                        value: '商品下单成功量',
                        label: '商品下单成功量'
                    },

                    {
                        value: '深度使用量',
                        label: '深度使用量'
                    }, {
                        value: '次日留存人数',
                        label: '次日留存人数'
                    }, {
                        value: '7日留存人数',
                        label: '7日留存人数'
                    }, {
                        value: '登录人数',
                        label: '登录人数'
                    },
                    {
                        value: '应用调起人数',
                        label: '应用调起人数'
                    }, {
                        value: '2日留存人数',
                        label: '2日留存人数'
                    }, {
                        value: '3日留存人数',
                        label: '3日留存人数'
                    }, {
                        value: '4日留存人数',
                        label: '4日留存人数'
                    },

                    {
                        value: '5日留存人数',
                        label: '5日留存人数'
                    }, {
                        value: '6日留存人数',
                        label: '6日留存人数'
                    }, {
                        value: '14日留存人数',
                        label: '14日留存人数'
                    }, {
                        value: '其它转化量(APP)',
                        label: '其它转化量(APP)'
                    },
                ],
                options2: [{
                    value: '消费',
                    label: '消费'
                }, {
                    value: '展现',
                    label: '展现'
                },{
                    value: '点击',
                    label: '点击'
                }, {
                    value: '平均点击价格',
                    label: '平均点击价格'
                },{
                    value: '转化量',
                    label: '转化量'
                }, {
                    value: '转化成本',
                    label: '转化成本'
                }],
                options: [{
                    value: 0,
                    label: '合计'
                }, {
                    value: 1,
                    label: '分时'
                }, {
                    value: 2,
                    label: '分日'
                }, {
                    value: 3,
                    label: '分周'
                }, {
                    value: 4,
                    label: '分月'
                }],
                isSelect: '账户整体',
                activeName: '整体走势',

            };
        },
        methods: {
            async queryList() {
                this.form.createTime = this.formatDate(this.timerArray[0]);
                this.form.updateTime = this.formatDate(this.timerArray[1]);
                console.log(this.form)
                let res = await appletReportList(this.form)
              const modifiedArray = this.replaceNullWithDash( res.rows);
              this.tableList = modifiedArray|| []

                 this.form.total = Math.ceil(Number(res.total) );
            },
            initChart() {
                // 基于准备好的dom，初始化echarts实例
                this.chartInstance = echarts.init(this.$refs.chart);

                // 指定图表的配置项和数据
                const option = {
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '100%',
                            data: [
                                { value: 0, name: '' },
                                { value: 0, name: '' },
                                { value: 0, name: '' },
                                // ...其他数据
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                this.chartInstance.setOption(option);
            },

            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        mounted() {
            this.$nextTick(() => {
                // 确保DOM渲染完毕后初始化图表
                this.initChart();
            });
            this.queryList()
        },
        beforeDestroy() {
            // 组件销毁前，清理ECharts实例
            if (this.chartInstance) {
                this.chartInstance.dispose();
            }
        }
    };
</script>
<style>
</style>
<style scoped lang="less">
    .fcRightBox {
        height: 100%;
        width: calc(100vw - 240px);

        .fcHeader {
            background: #fff;
            border-radius: 6px;
            padding: 16px 24px 20px;
            margin-bottom: 24px;

            .fcHeader-title-container {

                position: relative;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;

                .left-part {

                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;

                    .title {
                        font-size: 20px;
                        color: #282c33;
                    }

                    .refresh-data-time {
                        display: inline-block;
                        margin-bottom: 4px;
                    }

                }

                .right-part {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;

                    .baidu-market-tip {
                        color: #a8b0bf;
                        font-size: 12px;

                        .baidu-market-name {
                            color: #0052cc;
                        }
                    }

                    .fcHeader-date-pick-container {
                        margin-left: 12px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        align-items: center;

                        /deep/ .el-checkbox {
                            margin-left: 12px;
                        }
                    }
                }
            }
        }

        .fcHeader-container-custom-dash {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

        .fcHeader-container {
            position: relative;
            background: #fff;
            border-radius: 6px;
            padding: 24px;
            padding-top: 12px;

            .fcHeader-container-title-box {
                position: absolute;
                right: 24px;
                top: 20px;
                height: 28px;
                display: flex;
                align-items: center;

                .fcHeader-container-title-tip {
                    font-size: 12px;
                    color: #a8b0bf;
                    z-index: 9;
                }
            }
        }

        .account-report-radio-container {
            width: calc(100% - 48px);
            display: flex;

            overflow: auto;

            .account-report-radio-card {
                min-width: 208px;
                padding: 12px 16px;
                border-radius: 6px;
                border: 1px solid #c4daff;
                background: #fff;
                margin-right: 16px;
                cursor: pointer;
                color: #545b66;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;

                .account-report-radio-card-base {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .account-report-radio-card-base-cost {
                        display: flex;
                        align-items: center;
                        color: #282c33;
                        font-weight: 500;

                        .account-report-radio-card-base-cost-num {
                            font-size: 20px;
                            line-height: 28px;
                            margin: 0 4px;
                        }
                    }
                }
            }

            .account-report-radio-card-selected {
                border: 1px solid #0054e6;
                color: #0054e6;

                .account-report-radio-card-base-cost {
                    color: #0054e6;
                }
            }

        }
    }
</style>
<style scoped>
    .dashboard .box-card {
        margin-bottom: 20px;
    }

    .dashboard .text-item {
        padding: 20px 0;
        text-align: center;
    }

    .dashboard .number {
        font-size: 24px;
        color: #333;
    }

    .dashboard .change {
        font-size: 14px;
        color: #333;
    }

    .dashboard .change el-icon {
        color: #67C23A;
    }

    .chart {
        width: 100%;
    }

    .contentHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

    }

    .contentHeader_right {
  min-width: 300px;
        display: flex;
        align-items: center;
        justify-content: space-between;

    }

    .insight-report-data-card-sum-card {
        width: 24%;
        background-color: #fff;
        min-height: 124px;
        border-radius: 4px;
        padding: 16px 16px 12px;
        display: flex;
        margin: 10px 0;
        flex-direction: column;


    }

    .insight-report-data-card-sum-card-title {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #848b99;
        line-height: 1.4;
        font-weight: 400;
    }

    .insight-report-data-card-sum-card-value {
        font-size: 24px;
        color: #333;
        line-height: 1.4;
        font-weight: 500;
        margin-top: 4px;
    }

    .insight-report-data-card-sum-card-rate {
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
    }

    .insight-report-data-card-sum-card-rate-content {
        font-size: 12px;
        color: #848b99;
        line-height: 1.4;
        font-weight: 400;
    }
    .chart-area {
        width: 200px;
    }
</style>
